<template>
	<image src="/static/account_security_center/title1.png" class="title" mode="heightFix" />
	<navigator v-if="!memberAuthVo?.idNumber || !memberAuthVo?.realName || memberAuthVo?.authStatus!=1"
		url="/pages/real_name/real_name" class="box i" style="width: 678rpx;margin: 36rpx 36rpx 0 36rpx;">
		实名认证<text class="red_txt">未认证</text>
		<image src="/static/icon/to_right.png" class="to_right" />
	</navigator>
	<template v-else>
		<view class="box" style="padding: 0 36rpx;width: 678rpx;margin: 36rpx 36rpx 0 36rpx;">
			<view class="i">姓名<text style="color: #020618;">{{memberAuthVo.realName}}</text>
			</view>
			<view class="i">身份证号<text style="color: #020618;">{{memberAuthVo.idNumber}}</text>
			</view>
			<view class="i" v-if="memberAuthVo?.authFace==1">人脸识别
				<image src="/static/icon/wenhao.png" @click="jiageshuoming=true" style="width: 36rpx;height: 36rpx;" />
				<view style="flex: 1;" />
				<text style="color: #020618;">已认证</text>
			</view>
			<view class="i" v-else>人脸识别
				<image src="/static/icon/wenhao.png" @click="jiageshuoming=true" style="width: 36rpx;height: 36rpx;" />
				<view style="flex: 1;" />
				<navigator :url="'/pages/face_recognition/face_recognition?name='+memberAuthVo.realName"
					style="color: #FB2C36;gap: 10rpx;display: flex;align-items: center;justify-content: flex-end;width: 300rpx;height: 100%;">
					未认证
					<image src="/static/icon/to_right.png" class="to_right" />
				</navigator>
			</view>
		</view>
	</template>
	<image src="/static/account_security_center/title2.png" class="title" mode="heightFix" />
	<view style="margin: 20rpx 36rpx;color: #90A1B9;font-size: 28rpx;">请确保收款账户为您本人有效账户,否则钱款损失将由您自行承担</view>
	<view class="box" style="padding: 0 36rpx;width: 678rpx;margin: 36rpx 36rpx 0 36rpx;">
		<view @click="bangka" v-if="!bank" class="i">银行卡<text class="red_txt">未添加</text>
			<image src="/static/icon/to_right.png" class="to_right" />
		</view>
		<navigator url="/pages/receiving_account/receiving_account?type=1" class="i" v-else>银行卡
			<view style="flex: 1;"></view>
			<!-- #ifdef MP-WEIXIN -->
			<view class="is_default" v-if="bank.isDefault">默认</view>
			<!-- #endif -->
			<text class="red_txt" style="color:#020618;flex: none;">尾号{{bank.accountNumber.slice(-4)}}</text>
			<image src="/static/icon/to_right.png" class="to_right" />
		</navigator>
		<!-- #ifndef MP-ALIPAY -->
		<navigator url="/pages/receiving_account/receiving_account?type=2" class="i" v-if="weChat">微信绑定
			<view style="flex: 1;"></view>
			<!-- #ifdef MP-WEIXIN -->
			<view class="is_default" v-if="weChat.isDefault">默认</view>
			<!-- #endif -->
			<text class="red_txt" style="color:#020618;flex: none;">已绑定</text>
			<image src="/static/icon/to_right.png" class="to_right" />
		</navigator>
		<view class="i" v-else @click="bindWx">微信绑定<text class="red_txt" style="color:#FB2C36;">未绑定</text>
			<image src="/static/icon/to_right.png" class="to_right" />
		</view>
		<!-- #endif -->
		<view @click="bangzfb" v-if="!alipay" class="i">支付宝<text class="red_txt">未绑定</text>
			<image src="/static/icon/to_right.png" class="to_right" />
		</view>
		<navigator url="/pages/receiving_account/receiving_account?type=4" class="i" v-else>支付宝
			<view style="flex: 1;"></view>
			<!-- #ifdef MP-WEIXIN -->
			<view class="is_default" v-if="alipay.isDefault">默认</view>
			<!-- #endif -->
			<text class="red_txt" style="color:#020618;flex: none;">尾号{{alipay.accountNumber.slice(-4)}}</text>
			<image src="/static/icon/to_right.png" class="to_right" />
		</navigator>
	</view>

	<view class="jiageshuoming" v-if="jiageshuoming">
		<view class="sanjian"></view>
		<view
			style="height: 36rpx;width: 100%;position: absolute;top: 0;left: 0;background-color: #ffffff;border-radius: 30rpx 30rpx 0 0;">
		</view>
		<view class="t">人脸识别</view>
		<view class="c">根据法律法规和监管要求，为保障交易安全，需要收集您的人脸信息用于实人认证，平台将保护您的个人信息安全。</view>
		<view class="b" @click="jiageshuoming=false">我知道了</view>
	</view>

	<view class="mask" v-if="weibangding">
		<view class="dialog">
			<image src="/static/icon/close.png" class="close" @click="weibangding=false" />
			<view class="content">当前账号未完成实名认证，无法绑定收款账户。请完成实名认证后，再进行绑定。</view>
			<view class="btn_box">
				<view @click="weibangding=false">取消</view>
				<navigator url="/pages/real_name/real_name">去认证</navigator>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/utils/api.js';
	import util from '@/utils/util.js';
	export default {
		data() {
			return {
				memberAuthVo: null,
				alipay: null,
				bank: null,
				weChat: null,
				jiageshuoming: false,
				weibangding: false,
			}
		},
		async onShow() {
			this.weibangding = false;
			this.account_and_auth();
		},
		methods: {
			async account_and_auth() {
				let {
					result
				} = await api.account_and_auth();
				if (result?.memberAuthVo?.realName) {
					result.memberAuthVo.realName = util.desensitizeName(result.memberAuthVo.realName);
				}
				if (result?.memberAuthVo?.idNumber) {
					result.memberAuthVo.idNumber = util.desensitizeIdCard(result.memberAuthVo.idNumber);
				}
				this.memberAuthVo = result?.memberAuthVo || null;
				this.alipay = result?.alipay || null;
				this.bank = result?.bank || null;
				this.weChat = result?.weChat || null;
			},
			async bindWx() {
				if (!this.memberAuthVo?.realName) {
					this.weibangding = true;
					return;
				}
				let {
					code
				} = await uni.login();
				let e = await api.bind_third_member_account({
					code,
					appid: 'wxbc8c2feaa45add1d',
					channelCode: 'xcx'
				});
				if (e.code == 200) {
					uni.showToast({
						title: '已绑定当前微信',
						icon: 'success',
						duration: 1500
					})
					this.weChat = true;
					this.account_and_auth();
				}
			},
			bangka() {
				if (!this.memberAuthVo?.realName) {
					this.weibangding = true;
					return;
				}
				uni.navigateTo({
					url: "/pages/bank/bank?realName=" + this.memberAuthVo.realName + '&idNumber=' + this
						.memberAuthVo.idNumber
				})
			},
			bangzfb() {
				if (!this.memberAuthVo?.realName) {
					this.weibangding = true;
					return;
				}
				uni.navigateTo({
					url: "/pages/zfb/zfb?realName=" + this.memberAuthVo.realName
				})
			}
		}
	}
</script>

<style>
	.title {
		height: 36rpx;
		width: auto;
		margin: 36rpx 36rpx 0 36rpx;
	}

	.i {
		width: 100%;
		height: 120rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 10rpx;
		color: #62748E;
		font-size: 30rpx;
	}

	.box .i {
		border-bottom: 1px solid #E2E8F0;
	}

	.box .i:last-child {
		border: none;
	}

	.box .i .is_default {
		background-color: #FFDF20;
		font-size: 24rpx;
		font-weight: bold;
		height: 40rpx;
		width: 70rpx;
		border-radius: 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 20rpx;
	}

	.red_txt {
		flex: 1;
		color: #FB2C36;
		text-align: right;
	}

	.to_right {
		height: 32rpx;
		width: 32rpx;
	}

	.jiageshuoming {
		width: 480rpx;
		height: auto;
		background: #FFFFFF;
		box-shadow: 0px 0px 30px 0px rgba(2, 6, 24, 0.02), 0px 5px 15px 0px rgba(2, 6, 24, 0.05), 0px 0px 2px 0px rgba(2, 6, 24, 0.1);
		border-radius: 30rpx;
		padding: 36rpx;
		position: absolute;
		top: 470rpx;
		left: 160rpx;
		box-sizing: border-box;
		position: absolute;
		z-index: 9999999;
	}

	.jiageshuoming .sanjian {
		background-color: #ffffff;
		height: 40rpx;
		width: 40rpx;
		border-radius: 10rpx 0 0 0;
		position: absolute;
		top: -15rpx;
		left: 40rpx;
		box-shadow: -5rpx -5rpx 30rpx 0px rgba(2, 6, 24, 0.02), -5rpx -5rpx 30rpx 0px rgba(2, 6, 24, 0.05), -5rpx -5rpx 30rpx 0px rgba(2, 6, 24, 0.1);
		transform: rotate(45deg);
	}

	.jiageshuoming .t {
		font-size: 34rpx;
		font-weight: bold;
		margin-bottom: 36rpx;
		height: 50rpx;
		line-height: 50rpx;
	}

	.jiageshuoming .c {
		font-size: 28rpx;
		line-height: 40rpx;
		margin-bottom: 36rpx;
	}

	.jiageshuoming .b {
		background-color: #FFDF20;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		font-size: 28rpx;
		border-radius: 20rpx;
	}
</style>